import { useState } from "react";
import { PlusOutlined, ReloadOutlined,EditOutlined } from "@ant-design/icons";
import ConnectDatabaseModal from "./ConnectDatabaseModal";

function DataSource() {
  const [isShow, setIsShow] = useState(false);
  const showModal = () => {
    setIsShow(true);
  };
  const closeModal = () => {
    setIsShow(false);
  };
  //   表格
  const dataSource = [
    {
      key: "1",
      name: "default",
      description: "",
      type: "MySQL",
      address: "localhost:3306/testdb",
      createTime: "",
      createUser: "",
    },
    {
      key: "2",
      name: "default",
      description: "",
      type: "MySQL",
      address: "localhost:3306/testdb",
      createTime: "",
      createUser: "",
    },
  ];

  const columns = [
    {
      title: "序号",
      dataIndex: "index",
      key: "name",
      render: (text, record, index) => index + 1,
    },
    {
      title: "名称",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "描述",
      dataIndex: "description",
      key: "description",
      width: 200,
    },
    {
      title: "类型",
      dataIndex: "type",
      key: "type",
    },
    {
      title: "数据库用户",
      dataIndex: "user",
      key: "user",
    },
    {
      title: "连接地址",
      dataIndex: "address",
      key: "address",
    },
    {
      title: "创建时间",
      dataIndex: "createTime",
      key: "createTime",
    },
    {
      title: "创建者",
      dataIndex: "createUser",
      key: "createUser",
    },
    {
      title: "Action",
      key: "action",
      render: () => (
        <Space size="middle">
          <Button type="link" icon={<EditOutlined />} onClick={showModal}>
            编辑
          </Button>
          <Button type="link" icon={<ReloadOutlined />}>
            刷新
          </Button>
        </Space>
      ),
    },
  ];

  return (
    <div>
      <Flex gap="small" wrap>
        <Button type="primary" icon={<PlusOutlined />} onClick={showModal}>
          新建
        </Button>
        <Button type="dashed" icon={<ReloadOutlined />}>
          刷新
        </Button>
      </Flex>
      <Divider></Divider>
      <Table size="middle" dataSource={dataSource} columns={columns} />
      <ConnectDatabaseModal isShow={isShow} closeModal={closeModal}/>
    </div>
  );
}
export default DataSource;
